<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link rel="stylesheet" href="static/css/semantic.min.css">
    		
		<script src="static/js/vue.js"></script>
        <!-- 引入样式 -->
    <link rel="stylesheet" href="static/element-ui/lib-master/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="static/element-ui/lib-master/index.js">
      
    </script>
    
	<script src="static/js/base.js"></script>
    <script src="static/js/axios.min.js"></script>
    <style>
        .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
    </style>
</head>
<body>
  

<div id="app">  
  <el-alert
  title="商品分类管理页面"
  description="对商品的分类进行管理"
  type="success"
  description="对商品的多级分类进行管理"
  show-icon>
  </el-alert>
  <h2 class="ui teal header" style="color: teawl;margin-top: 30px;text-align: center;">欢迎来到分类管理页面</h2>
   

  <!-- {{this.categories}} -->

	<!-- 通过一个li遍历多个 -->

    <div class="category">
			  <h3 class="ui teal header">商品多级分类名称：</h3>	

              <!-- 树形控件实现商品分类 -->
              <el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
show-checkbox
  class="filter-tree"
  :data="data1"
  node-key="id"
  :props="defaultProps"
  :filter-node-method="filterNode"
  ref="tree"

  :expand-on-click-node="false"
  :render-content="renderContent"
  

  
  >
</el-tree>

          
    </div>




</div>
<script src="static/js/cookie_utils.js"></script>

		<script src="static/js/base.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
              data1:[],
                message:"hello",
                dataList:[],
                categories:[],
                inputCategoryLevel1:true,
                token:"",
                userId:"",
                disabled:true,
                filterText:"",
                data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'categories',
          label: 'categoryName',
        }

            },
              watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
     created(){
      //  商品分类相关参数
                    this.showCategorires();
                },
            methods:{
                filterNode(value, data) {
                  console.log(value);
        if (!value) return true;
        return data.categoryName.indexOf(value) !== -1;
      },

append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },


      // ---------------

                showCategorires(){
                    let token=getCookieValue("token");
                    console.log(token);
                    this.token  = token;
                    let userId=getCookieValue("userId");
                    console.log(userId,"UserId");
                    this.userId=userId;
                    var url22=baseUrl+"index/categorylist";
                    axios({
								url:url22,
								method:"post",
								headers:{
									token:this.token
								},
								data:this.userId
							}).then(res=>{
  console.log(res.data.data);
  this.categories=res.data.data;
  this.data1 = res.data.data;
  this.dataList = this.categories.filter(function (type) {
            return type.parentId == "1";
          });
          console.log( this.categories,"categoryList")
  this.categories.forEach(element => {
  
      
  });

  
})
                },

                UpdateHandle(row) {  
                    row.disabled = false;   
                    this.inputCategoryLevel1=false;
                    console.log(row);
                  
                },
               
            }
        })
    </script>
    
</body>
</html>